import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Table,Input,Button,Modal,Select,Row,Col,Divider,Pagination,DatePicker,message,Popconfirm } from 'antd';
import styles from './index.less';
import moment from 'moment';
const Option = Select.Option;
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
import {TimeSpan} from '../../utils';


const Pages = ({ Learnplan, dispatch, loading }) => {
    const columns = [
        {
            title: '应急演练项目名称',
            dataIndex: 'plan_name',
        },
        {
            title: '项目编号',
            dataIndex: 'id',
        },
        {
            title: '实际演练时间',
            dataIndex: 're_time',
        },
        {
            title: '演练组织部门',
            dataIndex: 'plan_depart_Name',
        },
        {
            title: '演练参与部门',
            dataIndex: 're_depart_name',
        },
        {
            title: '演练类别',
            dataIndex: 'practice_form',
            render:text => text == '1'?"桌面演练":"功能演练",
        },
        {
            title: '总指挥',
            dataIndex: 'chief_name',
        },
        {
            title: '现场指挥',
            dataIndex: 'scene_chief_name',
        },
        {
            title: '操作',
            dataIndex: 'option',
            render: (text,record) =><div>
                {/*<Popconfirm title="确定移除?" onCancel={()=>{}} onConfirm={*/}
                {/*()=> dispatch({type:"Learnplan/deleteLearnplan",payload:{id:record.id}})*/}
                {/*} okText="是" cancelText="否">*/}
                {/*<a style={{color:"red"}}>删除</a>*/}
                {/*</Popconfirm>*/}
                {/*<Divider type="vertical" />*/}
                <a onClick={()=>{
                    dispatch({type:"Learnplan/gotoList",payload:{id:record.id}});
                    localStorage.setItem('id',record.id);
                    // dispatch({type:"Learnplan/save",payload:{view:true,record:record}});
                    dispatch({type:"app/goToPath",payload:'Learningplan_list'});
                }}>详情</a>
            </div>,
        },
    ];
    return(
        <div className={styles.container}>
            <PagesGET dispatch={dispatch} {...Learnplan} loading={loading.global}/>
            <Table rowKey={id=>id.id}
                columns={columns}
                size="small"
                loading={loading.global}
                pagination={false}
                dataSource={Learnplan.getLearnplanData || null} />
            <Pagination current={Learnplan.pages} showTotal={total => `共计 ${total} 条`}
                style={{float: 'right', margin: 10}} size="small" total={Learnplan.total}
                onChange={pages => { !loading.global && dispatch({type:'Learnplan/save',payload:{pages:pages}});}}/>
        </div>
    );
};


class PagesGET extends React.Component {


    constructor (props) {
        super(props);
        this.state = {
            plan_department_id:[],
            plan_types:'',
            prepare_name_id:'',
            plan_name:"",
            prepare_name:'',
            study_time:'',
            plan_typesADD :'',
            study_nameADD:'',
            study_timeADD:TimeSpan(Date.parse(new Date())),
        };
    }

    // 实例化生命周期函数1
    componentWillMount () {
        //判断是否登录
        this.props.dispatch({type:"Learnplan/getLearnplan",payload:{
            plan_name:'',
            plan_types :'',
            time:'',
            state:'',
            pageNumber :1,
            pageSize :10,
        }});
        let date=new Date;
        let year =date.getFullYear();
        let arr = [];
        for(let i = 2010;i<year+2;i++){
            arr.push(i);
        }
        this.setState({timeArr:arr});
    }

    render (){

        let { pages,record,view ,dispatch ,getYLBMData,getTXLData,loading} = this.props;
        return (
            <div className={styles.containerit}>
                <Input value={this.state.plan_name } placeholder="预案名称" style={{margin:10,width:200}}
                    onChange={e=>this.setState({plan_name :e.target.value})}/>
                <Select placeholder='预案种类' value={this.state.plan_types || undefined} style={{margin:10,width:200}} onChange={value=>{
                    this.setState({
                        plan_types:value,
                    });
                }}>
                    <Option value="">全部</Option>
                    <Option value="0">综合应急预案</Option>
                    <Option value="1">专项应急预案</Option>
                    <Option value="2">现场处置⽅案</Option>
                </Select>
                <Select placeholder='执行情况' value={this.state.prepare_name || undefined} style={{margin:10,width:200}} onChange={value=>{
                    this.setState({
                        prepare_name:value,
                    });
                }}>
                    <Option value="">全部</Option>
                    <Option value="0">执行中</Option>
                    <Option value="1">已经完成</Option>
                    <Option value="2">未执行</Option>
                    <Option value="3">已申请延迟</Option>
                </Select>
                <Select placeholder='请选择年份' value={this.state.plan_department || undefined}
                    style={{margin:10,width:200}} onChange={value=>{
                        this.setState({
                            plan_department:value,
                        });
                    }}>
                    <Option value="">全部</Option>
                    {
                        this.state.timeArr && this.state.timeArr.map(item=>{
                            return <Option key={item} value={item}>{item}年</Option>;
                        })
                    }
                </Select>
                <Button style={{margin:10}} type='primary' onClick={()=>{
                    let {plan_name,prepare_name,plan_types,plan_department} = this.state;
                    this.props.dispatch({type:"Learnplan/getLearnplan",payload:{
                        plan_name:plan_name,
                        plan_types :plan_types,
                        time:plan_department,
                        state:prepare_name,
                        pageNumber :pages,
                        pageSize :10,
                    }});
                }
                }>查询</Button>
                <Button onClick={()=>{
                    this.setState({
                        plan_name:'',
                        plan_types :'',
                        plan_department:'',
                        prepare_name:'',
                    });
                }}>重置</Button>
            </div>
        );
    }

    componentWillReceiveProps (nextProps) {
        if (nextProps.record.id !== this.props.record.id) {
            let {plan_department_id,prepare_name_id,study_time,study_name,plan_types} = nextProps.record;
            // let id =[];
            // plan_department_id && plan_department_id.map(item=>id.push(item.id));
            // this.setState({
            //     plan_department_id: id,
            //     plan_typesADD:plan_types,
            //     prepare_name_id:prepare_name_id,
            //     study_nameADD:study_name,
            //     study_timeADD:study_time,
            // });
        }
        if(nextProps.pages !== this.props.pages){
            let {plan_name,plan_types,study_time,prepare_name} = this.state;
            this.props.dispatch({type:"Learnplan/getLearnplan",payload:{
                plan_name:plan_name,
                plan_types :plan_types,
                time:study_time,
                state:prepare_name,
                pageNumber :nextProps.pages ==0?1:nextProps.pages,
                pageSize :10,
            }});
        }
    }
}


// const Pages = ({ Learnplan, dispatch, loading }) => {
//     const columns = [
//         {
//             title: '学习预案名称',
//             dataIndex: 'study_name',
//         },
//         {
//             title: '预案种类',
//             dataIndex: 'plan_types',
//             render:text =>text && text == '0'?'综合应急预案': text == '1'?"专项应急预案":"现场处置⽅案",
//         },
//         {
//             title: '参与部⻔',
//             dataIndex: 'plan_department_id',
//             render:text =><div>
//                 {
//                     text.map((item,index)=>{
//                         return <div key={index}>
//                             *{item.plan_department}
//                         </div>;
//                     })
//                 }
//             </div>,
//         },
//         {
//             title: '计划学习时间',
//             dataIndex: 'study_time',
//             render:text =>TimeSpan(text),
//         },
//         {
//             title: '编制⼈',
//             dataIndex: 'prepare_name',
//         },
//         {
//             title: '编制时间',
//             dataIndex: 'prepare_time',
//             render:text =>TimeSpan(text),
//         },
//         {
//             title: '操作',
//             dataIndex: 'option',
//             render: (text,record) =><div>
//                 <Popconfirm title="确定移除?" onCancel={()=>{}} onConfirm={
//                     ()=> dispatch({type:"Learnplan/deleteLearnplan",payload:{id:record.id}})
//                 } okText="是" cancelText="否">
//                     <a style={{color:"red"}}>删除</a>
//                 </Popconfirm>
//                 <Divider type="vertical" />
//                 <a onClick={()=>{
//                     dispatch({type:"Learnplan/save",payload:{view:true,record:record}});
//                     dispatch({type:"Learnplan/newpost"});
//                 }}>修改</a>
//             </div>,
//         },
//     ];
//     return(
//         <div className={styles.container}>
//             <PagesGET dispatch={dispatch} {...Learnplan} loading={loading.global}/>
//             <Table rowKey={id=>id.id}
//                 columns={columns}
//                 size="small"
//                 loading={loading.global}
//                 pagination={false}
//                 dataSource={Learnplan.getLearnplanData || null} />
//             <Pagination current={Learnplan.pages} showTotal={total => `共计 ${total} 条`}
//                 style={{float: 'right', margin: 10}} size="small" total={Learnplan.total}
//                 onChange={pages => { dispatch({type:'Learnplan/save',payload:{pages:pages}});}}/>
//         </div>
//     );
// };
//
//
// class PagesGET extends React.Component {
//
//
//     constructor (props) {
//         super(props);
//         this.state = {
//             plan_department_id:[],
//             plan_types:'',
//             prepare_name_id:'',
//             study_name:"",
//             prepare_name:'',
//             study_time:'',
//             plan_typesADD :'',
//             study_nameADD:'',
//             study_timeADD:TimeSpan(Date.parse(new Date())),
//         };
//     }
//
//     // 实例化生命周期函数1
//     componentWillMount () {
//         //判断是否登录
//         this.props.dispatch({type:"Learnplan/getLearnplan",payload:{
//             study_name:'',
//             plan_types :'',
//             study_time:'',
//             prepare_name:'',
//             pageNumber :1,
//             pageSize :10,
//         }});
//     }
//
//     render (){
//
//         let { pages,record,view ,dispatch ,getYLBMData,getTXLData,loading} = this.props;
//         return (
//             <div className={styles.containerit}>
//                 <Input value={this.state.study_name } placeholder="学习预案名称" style={{margin:10,width:256}}
//                     onChange={e=>this.setState({study_name :e.target.value})}/>
//                 <Select placeholder='预案种类' style={{margin:10,width:256}} onChange={value=>{
//                     this.setState({
//                         plan_types:value,
//                     });
//                 }}>
//                     <Option value="">全部</Option>
//                     <Option value="0">综合应急预案</Option>
//                     <Option value="1">专项应急预案</Option>
//                     <Option value="2">现场处置⽅案</Option>
//                 </Select>
//                 <Input value={this.state.prepare_name } placeholder="编制人名称" style={{margin:10,width:256}}
//                     onChange={e=>this.setState({prepare_name :e.target.value})} />
//                 <DatePicker placeholder='计划学习时间'
//                     onChange={(date,dateString)=>{
//                         this.setState({
//                             study_time :dateString,
//                         });
//                     }} />
//                 <Button style={{marginLeft:10}} type='primary' onClick={()=>{
//                     let {study_name,prepare_name,plan_types,study_time} = this.state;
//                     this.props.dispatch({type:"Learnplan/getLearnplan",payload:{
//                         study_name:study_name,
//                         plan_types :plan_types,
//                         study_time:study_time,
//                         prepare_name:prepare_name,
//                         pageNumber :pages,
//                         pageSize :10,
//                     }});
//                 }
//                 }>查询</Button>
//                 <Button style={{margin:10}} onClick={()=>{
//                     dispatch({type:"Learnplan/save",payload:{view:true,record:{}}});
//                     dispatch({type:"Learnplan/newpost"});
//                     this.setState({
//                         plan_department_id:[],
//                         plan_typesADD :'',
//                         prepare_name_id:'',
//                         study_nameADD:'',
//                         study_timeADD:TimeSpan(Date.parse(new Date())),
//                     });
//                 }}>新增预案学习计划</Button>
//
//                 <Modal
//                     title={record.id?"修改巡检计划":"添加巡检计划"}
//                     visible={view}
//                     confirmLoading={loading}
//                     onOk={()=>{
//                         let {plan_department_id,plan_typesADD,prepare_name_id,study_nameADD,study_timeADD} = this.state;
//                         if(plan_department_id && plan_typesADD && prepare_name_id && study_nameADD && study_timeADD){
//                             let body ={
//                                 plan_department_id: plan_department_id,
//                                 plan_types:plan_typesADD,
//                                 prepare_name_id:prepare_name_id,
//                                 study_name:study_nameADD,
//                                 study_time:study_timeADD,
//                             };
//                             if(record.id){
//                                 body.id = record.id;
//                             }
//                             dispatch({type:record.id?"Learnplan/putLearnplan":"Learnplan/postLearnplan",payload:body});
//                         }else{
//                             message.error('请填写完整！');
//                         }
//                     }}
//                     onCancel={()=>{
//                         dispatch({type:"Learnplan/save",payload:{view:false,record:{}}});
//                     }}>
//                     <Row>
//                         <Col span={6}><span><span style={{color:'red'}}>*</span>演练责任部门:</span></Col>
//                         <Col span={14}>
//                             <Select disabled={record.id?true:false} placeholder="演练责任部门" value={this.state.plan_department_id} style={{width: 200, marginBottom: 10, marginTop: -4}}
//                                 mode="multiple"
//                                 onChange={value=>{
//                                     this.setState({
//                                         plan_department_id:value,
//                                     });
//                                 }}>
//                                 {getYLBMData && getYLBMData.map(item =>{
//                                     return <Option key={item.id} value={item.id}>{item.plan_department}</Option>;
//                                 })}
//                             </Select>
//                         </Col>
//                         <Col span={6}><span><span style={{color:'red'}}>*</span>预案种类:</span></Col>
//                         <Col span={14}>
//                             <Select value={this.state.plan_typesADD || '请选择'} style={{width: 200, marginBottom: 10, marginTop: -4}} onChange={value=>{
//                                 this.setState({
//                                     plan_typesADD:value,
//                                 });
//                             }}>
//                                 <Option value="0">综合应急预案</Option>
//                                 <Option value="1">专项应急预案</Option>
//                                 <Option value="2">现场处置⽅案</Option>
//                             </Select>
//                         </Col>
//                         <Col span={6}><span><span style={{color:'red'}}>*</span>编制人:</span></Col>
//                         <Col span={14}>
//                             <Select value={this.state.prepare_name_id || '请选择'} style={{width: 200, marginBottom: 10, marginTop: -4}}
//                                 // mode="multiple"
//                                 onChange={value=>{
//                                     this.setState({
//                                         prepare_name_id:value,
//                                     });
//                                 }}>
//                                 {getTXLData && getTXLData.map(item =>{
//                                     return <Option key={item.id} value={item.id}>{item.name}</Option>;
//                                 })}
//                             </Select>
//                         </Col>
//                         <Col span={6}><span><span style={{color:'red'}}>*</span>学习预案名称:</span></Col>
//                         <Col span={14}>
//                             <Input style={{width: 200, marginBottom: 10, marginTop: -4}}
//                                 onChange={e => this.setState({study_nameADD: e.target.value})}
//                                 value={this.state.study_nameADD}
//                                 placeholder="学习预案名称"/>
//                         </Col>
//                         <Col span={6}><span><span style={{color:'red'}}>*</span>计划学习时间:</span></Col>
//                         <Col span={14}>
//                             <DatePicker value={moment(this.state.study_timeADD, 'YYYY/MM/DD')}
//                                 onChange={(date,dateString)=>{
//                                     this.setState({
//                                         study_timeADD :dateString,
//                                     });
//                                 }} />
//                         </Col>
//                     </Row>
//                 </Modal>
//             </div>
//         );
//     }
//
//     componentWillReceiveProps (nextProps) {
//         if (nextProps.record.id !== this.props.record.id) {
//             let {plan_department_id,prepare_name_id,study_time,study_name,plan_types} = nextProps.record;
//             let id =[];
//             plan_department_id && plan_department_id.map(item=>id.push(item.id));
//             this.setState({
//                 plan_department_id: id,
//                 plan_typesADD:plan_types,
//                 prepare_name_id:prepare_name_id,
//                 study_nameADD:study_name,
//                 study_timeADD:study_time,
//             });
//         }
//         if(nextProps.pages !== this.props.pages){
//             let {study_name,plan_types,study_time,prepare_name} = this.state;
//             this.props.dispatch({type:"Learnplan/getLearnplan",payload:{
//                 study_name:study_name,
//                 plan_types :plan_types,
//                 study_time:study_time,
//                 prepare_name:prepare_name,
//                 pageNumber :nextProps.pages ==0?1:nextProps.pages,
//                 pageSize :10,
//             }});
//         }
//     }
// }

Pages.propTypes = {
    Learnplan: PropTypes.object,
    loading: PropTypes.object,
    dispatch: PropTypes.func,
};

export default connect(({ Learnplan, loading }) => ({ Learnplan, loading }))(Pages);
